<template>
    <div class="m-product-select">
        <dl class="tab">
            <dt>{{name}}<i class="el-icon-arrow-down el-icon--right"/></dt>
            <dd>
                <h3>{{name}}</h3>
                <span v-for="(item,index) of list" :key="index">{{item}}</span>
            </dd>
        </dl>
    </div>
</template>

<script>
export default {
    props: {
        name: {
            type: String,
            default: ''
        },
        list: {
            type: Array,
            default() {
                return []
            }
        }
    }
}
</script>

<style lang="scss">
     .m-product-select {
         padding-bottom: 5px;
         min-width: 120px;
         .tab {
             position: relative;
             dt {
                 font-size: 14px;
                 font-weight: 400;
                 color: #666;
                 cursor: pointer;
             }
             dd {
                 &:before {
                     content: ' ';
                     position: absolute;
                     display: block;
                     top: -11px;
                     width: 0;
                     height: 0;
                     border-style: solid;
                     border-color: transparent transparent #E5E5E5;
                     border-width: 5px;
                 }
                 &:after {
                     content: ' ';
                     position: absolute;
                     top: -8px;
                     left: 16px;
                     width: 0;
                     height: 0;
                     border-width: 4px;
                     border-color: transparent transparent #E5E5E5;
                     border-style: solid;
                     display: block;
                 }
                 display: none;
                 position: absolute;
                 top: 24px;
                 width: 510px;
                 background: #fff;
                 cursor: pointer;
                 user-select: text;
                 white-space: normal;
                 text-align: left;
                 border: 1px solid #E5E5E5;
                 font-size: 12px;
                 border-radius: 4px;
                 padding: 19px 15px 9px;
                 span {
                     display: inline-block;
                     min-width: 120px;
                     line-height: 1.5;
                     font-weight: 500;
                 }
                 h3 {
                     color: #ccc;
                     margin-bottom: 11px;
                     font-size: 16px;
                 }
             }
             &:hover {
                dd {
                    display: block;
                    z-index: 999;
                }
             }
         }
     }
</style>

